<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>复焕集 - 商户主页</title>
<link href="/poj-java/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/poj-java/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/seller.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/login.css" />
<link rel="stylesheet" href="css/sign.css" />
</head>

<body>
<div class="container-fluid logP hidden text-center" id="logP">
			<div class="login-container hidden" id="log">
				<!-- 登录卡片 -->
				<div class="login-card" id="login-card">
					<!-- 头部区域 -->
					<div class="login-header">
						<h1>欢迎回来</h1>
						<p>请登录您的账户</p>
					</div>

					<!-- 表单区域 -->
					<div class="form-container">
						<!-- 头像显示区域 -->
						<div class="avatar-container" id="avatarContainer">
							<div class="avatar-placeholder">
								👤
							</div>
						</div>

						<!-- 响应消息 -->
						<div id="responseMessage" class="response-message"></div>

						<!-- 登录表单 -->
							<!-- 用户名/邮箱 -->
							<div class="form-group">
								<label for="loginId">用户名</label>
								<div class="input-wrapper">
									<div class="input-icon">@</div>
									<input type="text" id="loginId" name="loginId" class="form-control"
										placeholder="请输入用户名" required>
								</div>
							</div>

							<!-- 密码 -->
							<div class="form-group">
								<label for="password">密码</label>
								<div class="input-wrapper">
									<div class="input-icon">🔒</div>
									<input type="password" id="password" name="password" class="form-control"
										placeholder="请输入密码" required>
									<div class="password-toggle" id="togglePassword">👁️</div>
								</div>
								<div style="margin-top: 8px;">
									<span id="loginInfo" class="status-text"></span>
								</div>
								<div class="forgot-password">
									<a href="#">忘记密码?</a>
								</div>
							</div>

							<!-- 记住我 -->
							<div class="remember-me">
								<input type="checkbox" id="rememberMe" name="rememberMe">
								<label for="rememberMe">记住我的登录状态</label>
							</div>

							<!-- 登录按钮 -->
							<button class="login-btn" id="loginBtn">
								<span id="loginBtnText">登录账户</span>
							</button>

					</div>
				</div>
			</div>

			<div class="register-container hidden" id="sig">
				<!-- 注册卡片 -->
				<div class="register-card">
					<!-- 头部区域 -->
					<div class="register-header">
						<h1>用户注册</h1>
						<p>创建您的专属账户</p>
					</div>

					<!-- 表单区域 -->
					<div class="form-container">
						<!-- 响应消息 -->
						<div id="responseMessage" class="response-message"></div>

						<!-- 注册表单 -->
						<form id="registerForm">
							<!-- 用户名 -->
							<div class="form-group">
								<label for="username">用户名</label>
								<div class="input-wrapper">
									<div class="input-icon">👤</div>
									<input type="text" id="username" name="username" class="form-control"
										placeholder="请输入用户名" required>
								</div>
								<div style="margin-top: 8px;">
									<span id="statusText" class="status-text">请输入用户名</span>
								</div>
							</div>

							<!-- 密码 -->
							<div class="form-group">
								<label for="password">密码</label>
								<div class="input-wrapper">
									<div class="input-icon">🔒</div>
									<input type="password" id="passwords" name="password" class="form-control"
										placeholder="请输入密码" required>
									<div class="password-toggle" id="togglePasswords">👁️</div>
								</div>
								<div style="margin-top: 8px;">
									<span id="passwordText" class="status-text">请输入密码</span>
								</div>
							</div>

							<!-- 性别 -->
							<div class="form-group">
								<label for="gender">性别</label>
								<div class="input-wrapper">
									<div class="input-icon">👫</div>
									<select id="gender" name="gender" class="form-control" required>
										<option value="空">请选择性别</option>
										<option value="男">男</option>
										<option value="女">女</option>
									</select>
								</div>
								<div style="margin-top: 8px;">
									<span id="genText" class="status-text"></span>
								</div>
							</div>

							<!-- 生日 -->
							<div class="form-group">
								<label for="birthday">生日</label>
								<div class="input-wrapper">
									<div class="input-icon">📅</div>
									<input type="date" id="birthday" name="birthday" class="form-control" required>
								</div>
							</div>

							<!-- 上传头像 -->
							<div class="form-group">
								<label for="headImg">上传头像</label>
								<input type="file" id="headImg" name="headImg" accept="image/*" style="display: none;">
								<button type="button" id="uploadBtn" class="upload-btn">选择图片</button>
							</div>

							<!-- 注册按钮 -->
							<button class="register-btn" id="registerBtn">
								<span id="registerBtnText">注册</span>
							</button>
						</form>

					</div>
				</div>

			</div>
		</div>
	<!-- 导航栏 -->
	<div class="container-fluid fixed-top  navbar-custom" id="top">
			<nav class="navbar navbar-expand-lg" role="navigation">

				<div class="container position-relative">
					<a href="index.jsp" class="navbar-brand navbar-b-custom font-logo">
						<img src="img/headLogo.png" alt="" id="headImage">
					</a>
					<!-- 搜索条 -->
					<form action="searchGoodsDo" method="get">
						<div class="d-flex position-absolute start-50 translate-middle-x serchBar">
							<input  name="searchName" type="text" class="form-control1 form-control-sm" id="searchBar" />
							<button class="btn btn-primary ms-2 serchBut" id="searchBtn">搜索</button>
						</div>
					</form>
					<!-- 右侧用户信息栏 -->



					<c:choose>
						<c:when test="${not empty sessionScope.logInUser}">
							<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
								<li class="nav-item d-flex align-items-center">
									<input type="hidden" class="userid" value=${sessionScope.logInUser.userid}>
									<img src="${logInUser.headimg}" alt="" class="headimg align-self-center">
								</li>
								<li class="nav-item"><a href="" class="nav-link navbar-a-custom"
										id="">个人主页</a></li>
								<li class="nav-item"><a href="" class="nav-link navbar-a-custom">我的订单</a></li>
								<li class="nav-item"><a href="userLogOut" class="nav-link navbar-a-custom">退出</a></li>
							</ul>
						</c:when>
						<c:otherwise>
							<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
								<li class="nav-item"><a href="#" class="nav-link navbar-a-custom" id="sign">注册</a></li>
								<li class="nav-item"><a href="#" class="nav-link navbar-a-custom" id="login">登录</a></li>
							</ul>
						</c:otherwise>
					</c:choose>

				</div>
			</nav>
		</div>
	<!-- 中部内容区 -->
	<div class="main-content">
		<div class="middle" style="margin-top:40px;" id="middle">
			<div class="headMineInformation">
				<div>
					<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
						<li class="nav-item d-flex align-items-center">
						<img src="${good.seller.headimg}" alt=""
							class="headimgTwice align-self-center"> 
							<input type="hidden" id="userid"> <span class="usernameShow">${good.seller.username}</span>
							<c:choose>
        						<c:when test="${hasFollow}">
            						<form action="addFollowDo">
										<input type="hidden" name="del" value="true">
										<input type="hidden" name="sellerid" value="${good.sellerId }" >
										<button class="settingInformationBtn">取关ta</button>
									</form>
        						</c:when>
        						<c:otherwise>
            						<form action="addFollowDo">
										<input type="hidden" name="add" value="true">
										<input type="hidden" name="sellerid" value="${good.sellerId }">
										<button class="settingInformationBtn">关注ta</button>
									</form>
        						</c:otherwise>
    						</c:choose>
							
						</li>
						<li class="nav-item d-flex align-items-center mt-2"><span
							class="InfromationShow"> <i class="fa fa-map-marker-alt"></i>
								${good.seller.address}
						</span> <span class="InfromationShow">|</span> <span
							class="InfromationShow"> <i class="fa fa-users"></i> 粉丝:
								${good.seller.fannum}
						</span> <span class="InfromationShow">|</span> <span
							class="InfromationShow"> <i class="fa fa-heart"></i> 关注:
								${good.seller.follownum}
						</span> <span class="InfromationShow"> </span></li>
					</ul>

					<div class="user-tags">
					<!-- 表查询 -->
						<c:forEach items="${good.seller.userTags}" var="tag" varStatus="status">
    						<span class="tag">${tag}</span>
    					</c:forEach>
					</div>
					<!-- 自我介绍 -->
					<div class="self_introduction">${good.seller.introduce}</div>
				</div>
			</div>

			<!-- 用户数据卡片 -->
			<div class="user-stats-card">
				<div class="stat-item">
					<div class="stat-value">${good.seller.like}</div>
					<div class="stat-label">获赞与收藏</div>
				</div>
				<div class="stat-item">
					<div class="stat-value">${good.seller.favorableRate * 100}%</div>
					<div class="stat-label">好评率</div>
				</div>
				<div class="stat-item">
					<div class="stat-value">${good.seller.soldCount}</div>
					<div class="stat-label">卖出宝贝</div>
				</div>
				<div class="stat-item">
				<!-- 数据库查询 -->
					<div class="stat-value">${good.seller.onSellGoodsNum}</div>
					<div class="stat-label">在售宝贝</div>
				</div>
			</div>
			<div class="section-title">
				<span>信用档案</span>
			</div>
			<div class="user-stats-card">
				<div class="stat-item">
					<c:choose>
    					<c:when test="${good.seller.sellernum >= 0 && good.seller.sellernum <= 30}">
       						<div class="stat-value">个人卖家</div>
    					</c:when>
    					<c:when test="${good.seller.sellernum > 30 && good.seller.sellernum <= 65}">
        					<div class="stat-value">优质卖家</div>
    					</c:when>
    					<c:when test="${good.seller.sellernum > 65 && good.seller.sellernum <= 90}">
        					<div class="stat-value">星级卖家</div>
    					</c:when>
    					<c:when test="${good.seller.sellernum > 90 && good.seller.sellernum <= 100}">
        					<div class="stat-value">钻石卖家</div>
    					</c:when>
    					<c:otherwise>
        					<div class="stat-value">N/A</div>
    					</c:otherwise>
					</c:choose>
					
					<div class="stat-label">卖家信用</div>
				</div>
				<div class="stat-item">
					<c:choose>
    					<c:when test="${good.seller.buyertag >= 0 && good.seller.buyertag <= 30}">
       						<div class="stat-value">萌新买家</div>
    					</c:when>
    					<c:when test="${good.seller.buyertag > 30 && good.seller.buyertag <= 65}">
        					<div class="stat-value">靠谱买家</div>
    					</c:when>
    					<c:when test="${good.seller.buyertag > 65 && good.seller.buyertag <= 90}">
        					<div class="stat-value">优选买家</div>
    					</c:when>
    					<c:when test="${good.seller.buyertag > 90 && good.seller.buyertag <= 100}">
        					<div class="stat-value">金牌买家</div>
    					</c:when>
    					<c:otherwise>
        					<div class="stat-value">N/A</div>
    					</c:otherwise>
					</c:choose>
					<div class="stat-label">买家等级</div>
				</div>
			</div>
			<div class="section-title">
				上架好物
			</div>
    		<div class="goods-stats-card">
    			<c:forEach items="${goodsList }" var="goods" varStatus="status">
					<div class="stat-item">
					<form action="goodsInfo" id="toInfo">
						<a href="#" onclick="$(this).parent().submit();">
    						<div class="stat-value">
    							<input type="hidden" name="goodId" value="${goods.goodid }">
    							<input type="hidden" name="userId" value="${good.seller.userid}" class="sellerid">
								<img src="${goods.goodimg }" class="goodsimg" alt="">
								<p style="margin: 0; color: black; font-size: 15px;">${goods.goodname }</p>
								<p style="margin: 0; font-size: 15px;">${goods.goodprice }</p>
							</div>
						</a>
					</form>
					</div>
				</c:forEach>
				<!-- 完成点击商品跳转页面 -->
    		</div>
			<div class="section-title">
				<!-- 异步请求实现 -->
				<span class="userComentsBtn">评价</span>
				<input type="text"class="form-control myComent" placeholder="输入评价">
			
				<div>
					<input type="number"class="form-control myScore" placeholder="输入评分">
				</div>
				
				<button id="send-conment" class="btn btn-primary">
					<i class="fas fa-paper-plane"></i>
				</button>
			</div>
			<div class="section-body"></div>
		</div>
	</div>

	<!-- 底部区 -->
	<footer class="container-fluid bottom p-3 mt-auto" id="footer">
		<div class="infoLeft mx-auto">
			<strong>复焕集 </strong>旧物也能焕然一新的二手市场。
		</div>
		<div class="container">
			<div class="d-flex flex-wrap justify-content-between">
				<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
					<strong>关于我们</strong>
					<li><a href="">公司介绍</a></li>
					<li><a href="">团队介绍</a></li>
					<li><a href="">媒体报道</a></li>
					<li><a href="">加入我们</a></li>
				</ul>
				<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
					<strong>帮助中心</strong>
					<li><a href="">新手入门</a></li>
					<li><a href="">交易流程</a></li>
					<li><a href="">常见问题</a></li>
					<li><a href="">安全指南</a></li>
				</ul>
				<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
					<strong>规则中心</strong>
					<li><a href="">用户协议</a></li>
					<li><a href="">隐私政策</a></li>
					<li><a href="">交易规则</a></li>
					<li><a href="">社区公约</a></li>
				</ul>
				<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
					<strong>联系我们</strong>
					<li><a href="">客服电话：400-114-514</a></li>
					<li><a href="">商务合作：bd@fuhuanji.com</a></li>
					<li><a href="">举报反馈：report@fuhuanji.com</a></li>
				</ul>
			</div>
		</div>
		<div class="copyright">© 2023 复焕集 All Rights Reserved.
			蜀ICP备12345678号</div>
	</footer>
	<script src="js/jquery.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/seller.js"></script>
	<script src="js/login.js"></script>
	<script src="js/sign.js"></script>
	<script src="js/userComents.js"></script>

</body>
</html>